<template>
  <div class="app">
    <h1>我是App组件</h1>
    <p>{{ count }}</p>
    <Gege :count="count" />
    <Didi :count="count" />
    <hr />
    <button @click="addCount">累加</button>
  </div>
</template>

<script>
import Gege from "./components/Gege.vue";
import Didi from "./components/Didi.vue";
export default {
  name: "App",
  components: { Gege, Didi },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addCount() {
      this.count++;
    },
  },

  // 数据劫持和数据代理之前,没有数据，methods等等
  beforeCreate() {
    console.log("父组件------beforeCreate---------");
  },

  // 数据劫持和数据代理之后,数据和方法等等已经加载
  created() {
    console.log("父组件------created---------");
  },
  // 挂载前，此时还没有生成dom
  beforeMount() {
    console.log("父组件------beforeMount---------");
  },
  // 挂载完成，至此所有的渲染阶段全部完成
  mounted() {
    console.log("父组件------mounted---------");
  },

  // 视图更新前，此时数据已更新，视图未更新，视图和数据不一致
  beforeUpdate() {
    console.log("父组件------beforeUpdate---------");
  },
  // 视图更新完成，视图和数据已同步
  updated() {
    console.log("父组件------updated---------");
  },
  // 销毁前，
  beforeDestroy() {
    console.log("父组件------beforeDestroy---------");
  },
  //销毁
  destroyed() {
    console.log("父组件------destroyed---------");
  },
};
</script>

<style scoped>
.app {
  border: 3px solid #aaa;
}
</style>